<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .masonry {
            column-count: 4;
            column-gap: 0;
        }

        .item {
            padding: 3px;
            /* 避免在元素内部插入分页符   */
            break-inside: avoid;  
        }

        .item img {
            display: block;
            width: 100%;
            height: auto;
        }

        @media (max-width: 1000px) {
            .masonry {
                column-count: 3;
                column-gap: 0;
            }
        }
    </style>


    <h1>masonry 瀑布流效果 </h1>
    <h1>    必知必会   </h1>
    <h1>兼容 ie </h1>

    
  <xmp style="font-size: 22px; font-weight: bolder;  margin-bottom: 66px;  color: black;  font-family: '微软雅黑';">   
    .masonry {
        column-count: 4;  -> 4 列
        column-gap: 0;    -> 间距为 0
    }

    .item {
        padding: 3px;
        break-inside: avoid;   ->  避免在元素内部插入分页符
    }

    屏幕宽度小于 1000px 的时候, 设置为 3 列
    @media (max-width: 1000px) {
        .masonry {
            column-count: 3;
            column-gap: 0;
        }
    }
</xmp>


    <div class="masonry">
        <div class="item">
            <img src="../img/Tesla (1).jpeg" alt="">
            Lorem ipsum dolor sit amet consectetur adipisictus accusamus
            quo veniam et officiis mollitia molestiae neque tenetur velit dicta aspernatur aliquid ad minus. Cupiditate.
        </div>
        <div class="item">
            <img src="../img/Tesla (2).jpeg" alt="">
            Lorem ipsum dolor sit amet consectetur adipisiconsectetur adipisicing elit. Nemo nobis dignissimos culpa. Quia, natus aing elit. Nemo aspernatur aliquid ad minus. Cupiditate.
        </div>
        <div class="item">
            <img src="../img/Tesla (3).jpeg" alt="">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo nobis dignissimos culpa. Quia, natus aciciis mollitia molestiae neque tenetur velit dicta aspernatur aliquid ad minus. Cupiditate.
        </div>
        <div class="item">
            <img src="../img/Tesla (4).jpeg" alt="">
            Lorem ipsum dolor sit amet consectetur adipditate.
        </div>
        <div class="item" style="">
            <img src="../img/Tesla (5).jpeg" alt="">
            Lorem ipsum dolor sit amet consectellitia molestiae nonsectetur adipisicing elit. Nemo nobis dignissimos culpa. Quia, natus aeque tenetur velit dicta aspernatur aliquid ad minus. Cupiditate.
        </div>
        <div class="item">
            <img src="../img/Tesla (6).jpeg" alt="">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nonsectetur adipisicing elit. Nemo nobis dignissimos culpa. Quia, natus aemo nobis dignissimos culpa. Quia, natus accusamus
            quo veniam et officiis mollitia molestiae neque tenetur. Cupiditate.
        </div>
        <div class="item">
            <img src="../img/Tesla (7).jpeg" alt="">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo nobis dignissimos culpa. Quia, natus accusamus
            quo venitur aliquid ad minus. Cupiditate.
        </div>
        <div class="item">
            <img src="../img/Tesla (8).jpeg" alt="">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo nobis dignissimos culpa. Quia, natus accusamus
            quo veniam et officiis mollid minus. Cupiditate.
        </div>
        <div class="item">
            <img src="../img/Tesla (9).jpeg" alt="">
            Lorem ipsum d ad minus. Cupiditate.onsectetur adipisicing elit. Nemo nobis dignissimos culpa. Quia, natus a
        </div>
        <div class="item">
            <img src="../img/Tesla (10).jpeg" alt="">
            Lorem ipsum dolor sit amet consecs culpa. Quia, nonsectetur adipisicing elit. Nemo nobis dignissimos culpa. Quia, natus aonsectetur adipisicing elit. Nemo nobis dignissimos culpa. Quia, natus aonsectetur adipisicing elit. Nemo nobis dignissimos culpa. Quia, natus aatus accusamus
            quo veniam et officiis mollitia molestiae neque tenetur velit dicta aspernatur aliquid ad minus. Cupiditate.
        </div>
        <div class="item">
            <img src="../img/Tesla (15).jpeg" alt="">
            Lorem ipsum dolor sit amet consectonsectetur adipisicing elit. Nemo nobis dignissimos culpa. Quia, natus aonsectetur adipisicing elit. Nemo nobis dignissimos culpa. Quia, natus aetur adipisicing elit. Nemo nobis dignissimos culpa. Quia, natus accusamus
            quo venitur aliquid ad minus. Cupiditate.
        </div>
        <div class="item">
            <img src="../img/Tesla (11).jpeg" alt="">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo nobis dignissimos culpa. Quia, natus accusamus
            quo veniam et officiis mollid minus. Cupiditate.
        </div>
        <div class="item">
            <img src="../img/Tesla (15).jpeg" alt="">
            Lorem ipsum d ad minus. Cupiditate.
        </div>
        <div class="item">
            <img src="../img/Tesla (13).jpeg" alt="">
            Lorem ipsum dolor sit amet consecs culpa. Quia, natus accusamus
            quo veniam et officiis mollitia molestiae neque tenetur velit dicta aspernatur aliquid ad minus. Cupiditate.
        </div>

    </div>

</body>

</html>